<template>
	<view style="padding: 22rpx;">
		<swiper style="height: 620rpx;" class="swiper" :indicator-dots="indicatorDots" autoplay interval="5000"
			duration="500">
			<swiper-item class="swiperItem" v-for="(item,index) in imageList" :key="index">
				<image style="width: 100%;height: 100%;" :src="item" mode=""></image>
				<view class="swiperIndex">
					{{index + 1}}/{{imageList.length}}
				</view>
			</swiper-item>
		</swiper>
		<view class="priceRow">
			<view class="priceLeft">
				<text class="textStyleRed">￥{{goodsData.sellingPrice}}</text>
				<text class="textStyle">￥{{goodsData.price}}</text>
			</view>
			<view class="priceRight">
				已售<text class="textStyleRed" style="margin-right: 1rpx;">{{goodsData.salesNumber}}</text>件
			</view>
		</view>
		<text class="goodsNameStyle">{{goodsData.name}}</text>
		<view class="detailsImage">
			<text class="detailsText">商品参数</text>
			<view style="margin-top: 15rpx;">
				<rich-text :nodes="goodsData.details.replace(/\<img/gi, '<img style=max-width:100%;height:auto')">
				</rich-text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodsData: {
                 details:''
				},
				imageList: [
				],
				goodsId: ''
			}
		},
		onLoad(option) {
			console.log(option)
			this.goodsId = option.id
			this.getData()
		},
		methods: {
			getData() {
				this.http({
					url: '/goods/goodsDetail',
					data: {

						id: this.goodsId
					},
					method: "POST",
					success: res => {
						if (res.code === 200) {
							this.goodsData = res.data
							this.imageList = res.data.pictures
						}
					}
				})
			},
		}
	}
</script>

<style>
	.swiperItem {
		position: relative;
	}

	.swiperIndex {
		padding-top: 14rpx;
		background: #707070;
		width: 120rpx;
		height: 62rpx;
		position: absolute;
		bottom: 60rpx;
		right: 60rpx;
		text-align: center;
		border-radius: 48rpx;
		/* box-sizing: border-box; */
		color: #FFFFFF;
		font-family: Source Han Sans CN;
	}

	.priceRow {
		justify-content: space-between;
		display: flex;
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: rgba(0, 0, 0, 0.45);
		margin: 20rpx 0rpx;
	}

	.priceLeft {}

	.textStyle {
		text-decoration: line-through;
	}

	.textStyleRed {
		margin-right: 17rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #E32929;
	}

	.goodsNameStyle {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #000000;
		margin: 15rpx 0rpx;
	}

	.priceRight {}

	.detailsImage {
		margin-top: 20rpx;
	}

	.detailsText {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: rgba(30, 37, 43, 0.65);
	}
</style>
